<template>
  <v-dialog v-model="registerMobileFlag" :fullscreen="isMobile" max-width="460">
    <v-card class="login-container" style="border-radius:4px">
      <v-icon class="float-right" @click="registerMobileFlag = false">
        mdi-close
      </v-icon>
      <div class="login-wrapper">
        <!-- 用户名 -->
        <v-text-field
          v-model="form.username"
          label="验证手机号"
          placeholder="请输入您的手机号"
          clearable
          @keyup.enter="register" @blur="check"
        />

        <div class="mt-7 send-wrapper">
          <v-text-field
            maxlength="6"
            v-model="form.code"
            label="验证码"
            placeholder="请输入6位验证码"
            @keyup.enter="register"
          />
          <v-btn text small :disabled="flag" @click="sendCode">
            {{ codeMsg }}
          </v-btn>
        </div>
        <!-- 注册按钮 -->
        <v-btn
          class="mt-7"
          block
          color="blue"
          style="color:#fff"
          @click="register"
        >
          免密登录
        </v-btn>
        <!-- 登录 -->
        <div class="mt-10 login-tip">
          <span @click="openLogin">已有邮箱账号？登录</span>
        </div>
      </div>
    </v-card>
  </v-dialog>
</template>

<script>
import request from '../../utils/request'
import { activeRouter } from "../../utils/permission";
export default {
  data: function() {
    return {
      form:{
        username: "",
        confirm:'',
        code:''
      },
      timer:null,
      flag: true,
      codeMsg: "发送",
      second: 60,
      show: false
    };
  },

  methods: {

    //定时器
    countDown() {

      this.flag = true
      this.timer = setInterval(() => {
        if (this.second > 0) {
          this.second--
          this.codeMsg = this.second
        } else {
          clearInterval(this.timer)
          this.timer = null
          this.flag = false
          this.codeMsg = '发送'
          this.second = 60
        }
      }, 1000)
    },
    check(){
      var reg = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;

      if (this.form.username===''){
        this.flag=true
      }
      if (!reg.test(this.form.username)) {
        this.$toast({ type: "error", message: "手机格式不正确" });
        this.flag=true
        return false;
      }else{
        this.flag=false
      }
    },
    openLogin() {
      this.$store.state.registerMobileFlag = false;
      this.$store.state.loginFlag = true;
    },
    sendCode() {


      request.post("/user/sendSms/"+this.form.username,this.form.code).then(res=>{
        if (res.msg=='发送成功'){
          this.$toast({
            type:'success',
            message:res.msg,
          })
        }else{
          this.$toast({
            type:'error',
            message:res.msg,
          })
        }

      })
      // 显示验证码
      this.countDown();
    },

    register() {
      var reg = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;


      if (!reg.test(this.form.username)) {
        this.$toast({ type: "error", message: "手机号码格式不正确" });
        return false;
      }
      request.post("/user/loginMobile",this.form).then(res=>{
        if (res.msg==='20000'){
          this.$toast({type: "success", message: "登录成功"});
          sessionStorage.setItem("user", JSON.stringify(res.data))  // 缓存用户信息
          this.$store.commit("login", res.data);
          this.$store.commit("closeModel");
          // this.$store.commit("login", res.data);
          // this.$router.push("/") //登录成功之后进行页面跳转
          const permissions = res.data.permissions;
          activeRouter(permissions)
          this.$router.go(0)
          this.registerMobileFlag = false;
        } else{
          this.$toast({type:"error",message:res.msg})
        }
      })

    }
  },
  computed: {
    registerMobileFlag: {
      set(value) {
        this.$store.state.registerMobileFlag = value;
      },
      get() {
        return this.$store.state.registerMobileFlag;
      }
    },
    isMobile() {
      const clientWidth = document.documentElement.clientWidth;
      if (clientWidth > 960) {
        return false;
      }
      return true;
    }
  },
  watch: {
    username(value) {
      var reg = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
      if (reg.test(value)) {
        this.flag = false;
      } else {
        this.flag = true;
      }
    }
  }
};
</script>
